<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立即执行函数(Execute function immediately)</title>
  <!-- 
  JavaScript 中的立即执行函数（Immediately Invoked Function Expression, IIFE）说明
  立即执行函数（IIFE）是一种在 JavaScript 中定义并立即执行的函数。以下是关于立即执行函数的详细说明与总结：

  1. 定义
  - 立即执行函数：立即执行函数是一个函数表达式，它在定义后立即被调用。通常用于创建一个独立的作用域，以避免变量污染全局作用域。

  2. 语法
  - 基本语法：
    (function() {
        // 函数体
    })();

  - 带参数的 IIFE：
    (function(param) {
        console.log(param);
    })('Hello, IIFE!'); // 输出: Hello, IIFE!

  3. 特性
  - 独立作用域：IIFE 创建了一个新的作用域，函数内部的变量不会影响外部作用域。

    var globalVar = "我是全局变量";

    (function() {
        var localVar = "我是局部变量";
        console.log(localVar); // 输出: 我是局部变量
    })();

    console.log(globalVar); // 输出: 我是全局变量
    // console.log(localVar); // 报错: localVar is not defined
  - 避免命名冲突：IIFE 可以避免全局作用域中变量的命名冲突。

  4. 应用场景
  - 模块化编程：在没有模块化机制的情况下，IIFE 可以用来模拟模块，封装变量和方法。
    var myModule = (function() {
      var privateVar = "我是私有变量";

      return {
        getPrivateVar: function() {
            return privateVar;
        }
      };
    })();

    console.log(myModule.getPrivateVar()); // 输出: 我是私有变量
    // console.log(myModule.privateVar); // 报错: privateVar is not defined

  - 初始化代码：IIFE 常用于初始化代码，确保在全局作用域中不留下多余的变量。
    (function() {
        // 初始化代码
        console.log("初始化完成");
    })();

  5. 优势

  - 封装性：通过创建独立的作用域，IIFE 提供了更好的封装性，避免了全局变量的污染。
  - 立即执行：IIFE 在定义后立即执行，适合用于需要立即运行的逻辑。

  6. 注意事项

  - 可读性：虽然 IIFE 提供了封装性，但过多使用可能会影响代码的可读性，尤其是在复杂的逻辑中。
  - 调试：在调试时，IIFE 内部的变量不会在全局作用域中显示，可能会增加调试的难度。
  - 性能：虽然 IIFE 可以避免全局变量的污染，但过度使用可能会影响性能，尤其是在大型项目中。
  - 兼容性：IIFE 是 JavaScript 的一种语法结构，兼容性较好，但在一些老旧的浏览器中可能存在兼容性问题。
  
  总结:
  立即执行函数是一种定义并立即执行函数的语法结构，具有独立作用域、避免全局变量污染、初始化数据、返回值等优点。在 JavaScript 中，合理使用 IIFE 可以有效避免全局变量的污染和命名冲突。
   -->
</head>
<body>

  <button class="immediately">按钮1</button>
  <button class="immediately">按钮2</button>
  <button class="immediately">按钮3</button>
  <button class="immediately">按钮4</button>
  
  <script>

    // 1. 定义
    // 立即执行函数（Immediately Invoked Function Expression，简称 IIFE）是一种定义并立即执行函数的语法结构。它的基本形式如下：
    (function() {
      // 函数体
    })();

    // 2. 特点
    // 立即执行函数具有以下特点：
    // - 函数定义后立即执行，无需调用。
    // - 函数内部的作用域独立于全局作用域，避免了全局变量的污染。
    // - 可以通过参数传递数据，实现函数的初始化。
    // - 可以返回值，方便后续使用。

    const result = (function() {
      // 函数体
      return "Hello, World!";
    })();
    console.log(result); // 输出: Hello, World!

    // 3. 应用场景
    // 立即执行函数在 JavaScript 中有多种应用场景，包括但不限于：
    // - 创建模块：通过 IIFE 创建独立的作用域，实现模块化编程。
    // - 初始化代码：IIFE 常用于初始化代码，确保在全局作用域中不留下多余的变量。
    // - 闭包：利用 IIFE 创建闭包，实现数据的封装和私有化。
    // - 模拟私有变量：通过 IIFE 创建私有变量，避免全局变量的污染。
    // - 防抖和节流：利用 IIFE 实现防抖和节流函数，提高性能。
    // - 代码压缩：IIFE 可以帮助代码压缩工具更好地进行代码混淆和压缩。

    const immediatelyButtons = document.querySelectorAll('.immediately');

    for (let i = 0; i < immediatelyButtons.length; i++) {
      (function(index) {
        immediatelyButtons[index].addEventListener('click', function() {
          console.log('点击了按钮', index + 1);
        });
      })(i);
    }


    // 4. 其他写法
    (function() {
      // 函数体
    }());

    (function() {
      // 函数体
    })()

    // 了解
    +function foo() {}();

    -function foo() {}();

    !function foo() {}();

    ~function foo() {}();
    
  </script>
  
</body>
</html>